html {
    height: 100%;
    padding: 0;
    
    
    
}
body {
	position: relative;
	background: black;
	color: white;
	height: 100%;
	margin: 0;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}
a {
	color: inherit;
	text-decoration: none;
	cursor: help;	
}
h1 {
	text-align: center;
	font-size: 32pt;
	margin: 0;
	padding: 0;
	font-weight: bold;
	text-shadow: 1px 0 1px silver;
}
h2, h3 {
	text-align: center;	
}
div#dial-wrapper {
	width: 500px;
	height:500px;
	margin: 0 auto;	
}
div#dial-wrapper table {
	width: 400px;
	height: 400px;
	margin: 0 auto;
	margin-top: 80px;
	border-radius: 100%;
	box-shadow: 1px 1px 1px #666666;	
	/*-webkit-transition: -webkit-transform 600000s linear;*/
	animation-duration: 600000s;  
  	animation-name: rot;  
  	animation-iteration-count: infinite;
	
}

@keyframes rot {  
    from {  
    	transform: rotate(0deg);  
    }  
      
    to {  
     	transform: rotate(3600000deg);  
    }  
}

@keyframes rrot {  
    from {  
    	transform: rotate(0deg);  
    }  
      
    to {  
     	transform: rotate(-3600000deg);  
    }  
}

@keyframes tshadow {
	from {
		text-shadow: 0 0 white;	
	}
	
	to {
		text-shadow: 0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet;	
	}
}

div#dial-wrapper span {
	font-size:16px;
	cursor: pointer;
	
}
div#dial-wrapper span:hover {
	animation-duration: 1s;
	animation-name: tshadow;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
div#dial-wrapper table tr td{
	text-align: center;
	animation-duration: 600000s;  
  	animation-name: rrot;  
  	animation-iteration-count: infinite;
}
div#dial-wrapper table tr:nth-child(2) td {
	width: 33%;	
}


div#dial {
		
}
div.copy {
font-size: 80%;
position: fixed;
bottom: 5px;
right: 5px;
}
